/*
 * Pills
 * A simple, responsive, and tiny CSS grid for humans who don't like memorising all those cryptic codes like col-*-6 or something.
 * https://github.com/rohitkrai03/pills
 * Copyright 2015, Rohit Rai
 */

@import "mixins";
@import "reset";

// the maximum width of the container in pixels
$max-width: 1024px;

$wide-max-width: 1180px;

$wider-max-width: 1366px;

// the minimum width of the container in pixels, before it switches to a mobile friendly display
$min-width: 599px;

// the padding that will be applied to both sides of a column in pixels, also known as gutter
$padding-width: 10px;

.row {
    display: block;
    margin: 0 auto;
    max-width: $max-width;
    overflow: hidden;
    *zoom: 1;

    &::before,
    &::after {
        content: "";
        display: table;
        line-height: 0;
    }

    &::after {
        clear: both;
    }

    .row {
        max-width: 100%;
        min-width: 100%;
    }

    //This makes padding of first and last column double than normal
    .column,
    .columns {
        float: left;
        padding: $padding-width;
        width: 100%;

        &:first-of-type {
            padding-left: 2 * $padding-width;
        }

        &:last-of-type {
            padding-right: 2 * $padding-width;
        }

    }

}

.wide {
    max-width: $wide-max-width;
}

.wider {
    max-width: $wider-max-width;
}

.free-width {
    max-width: none;
}


.column,
.columns {
    // This causes the img to be resized if img is bigger than the column
    img {
        max-width: 100%;
    }

    // This is to make padding of nested rows or columns as zero
    & .column,
    & .columns {

        &:first-of-type {
            padding-left: 0;
        }

        &:last-of-type {
            padding-right: 0;
        }

    }

    & .row {

        &:first-of-type > .column,
        &:first-of-type > .columns {
            padding-top: 0;
        }

        &:last-of-type > .column,
        &:last-of-type > .columns {
            padding-bottom: 0;
        }

    }

    // To let people remove any padding
    &.no-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    // For people who understand columns in a human way better
    &.one {
        @include column-width(1);
    }

    &.two {
        @include column-width(2);
    }

    &.three {
        @include column-width(3);
    }

    &.four {
        @include column-width(4);
    }

    &.five {
        @include column-width(5);
    }

    &.six {
        @include column-width(6);
    }

    &.seven {
        @include column-width(7);
    }

    &.eight {
        @include column-width(8);
    }

    &.nine {
        @include column-width(9);
    }

    &.ten {
        @include column-width(10);
    }

    &.eleven {
        @include column-width(11);
    }

    &.twelve {
        @include column-width(12);
    }

    // * For people who don't like thinking of grids in columns, rather they like to think in portions of page. Like half or one third of page.
    // * Width classes also have shorthand versions numbered as fractions
    // * For example: for a grid unit 1/3 (one third) of the parent width,
    // * simply apply class="w-1-3" to the element.

    &.whole,
    &.w-1-1 {
        @include fractional-column-width(1, 1);
    }

    &.half,
    &.w-1-2 {
        @include fractional-column-width(1, 2);
    }

    &.one-third,
    &.w-1-3 {
        @include fractional-column-width(1, 3);
    }

    &.two-thirds,
    &.w-2-3 {
        @include fractional-column-width(2, 3);
    }

    &.one-quarter,
    &.one-fourth,
    &.w-1-4 {
        @include fractional-column-width(1, 4);
    }

    &.three-quarters,
    &.three-fourths,
    &.w-3-4 {
        @include fractional-column-width(3, 4);
    }

    &.one-fifth,
    &.w-1-5 {
        @include fractional-column-width(1, 5);
    }

    &.two-fifths,
    &.w-2-5 {
        @include fractional-column-width(2, 5);
    }

    &.three-fifths,
    &.w-3-5 {
        @include fractional-column-width(3, 5);
    }

    &.four-fifths,
    &.w-4-5 {
        @include fractional-column-width(4, 5);
    }

}

.offset {

    &.by-one {
        @include offset-margin(1);
    }

    &.by-two {
        @include offset-margin(2);
    }

    &.by-three {
        @include offset-margin(3);
    }

    &.by-four {
        @include offset-margin(4);
    }

    &.by-five {
        @include offset-margin(5);
    }

    &.by-six {
        @include offset-margin(6);
    }

    &.by-seven {
        @include offset-margin(7);
    }

    &.by-eight {
        @include offset-margin(8);
    }

    &.by-nine {
        @include offset-margin(9);
    }

    &.by-ten {
        @include offset-margin(10);
    }

    &.by-eleven {
        @include offset-margin(11);
    }

    // fractional offset
    &.by-half {
        @include fractional-offset-margin(1, 2);
    }

    &.by-one-third {
        @include fractional-offset-margin(1, 3);
    }

    &.by-two-thirds {
        @include fractional-offset-margin(2, 3);
    }

    &.by-one-quarter,
    &.by-one-fourth {
        @include fractional-offset-margin(1, 4);
    }

    &.by-three-quarters,
    &.by-three-fourths {
        @include fractional-offset-margin(3, 4);
    }

    &.by-one-fifth {
        @include fractional-offset-margin(1, 5);
    }

    &.by-two-fifths {
        @include fractional-offset-margin(2, 5);
    }

    &.by-three-fifths {
        @include fractional-offset-margin(3, 5);
    }

    &.by-four-fifths {
        @include fractional-offset-margin(4, 5);
    }

}

// A few Utilities
.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.pull-left {
    float: left;
}

// This class can be used to hide stuff on all devices except mobile
.only-on-mobiles {
    display: none !important;
}

// To hide some blocks on all devices. This block will not be rendered on webpage.
.hide {
    display: none !important;
}

// To make some blocks invisible on all devices. This block will be rendered with visibility as hidden on webpage.
.invisible {
    visibility: hidden;
}




// A few responsive titbits
@media screen and (max-width: 599px) {
    // This basically stacks all the columns for mobile devices. Except when you explicitly say .no-stacking-mobiles
    .row {

        &:not(.no-stacking-on-mobiles) > .column,
        &:not(.no-stacking-on-mobiles) > .columns {
            padding-left: 20px;
            padding-right: 20px;
            width: 100% !important;
        }

    }

    .column,
    .columns {

        & .row {

            & .column,
            & .columns {
                padding-left: 0px;
                padding-right: 0px;
            }

        }

    }

    // Changing a few behaviours on mobile devices if you want.
    .center-on-mobiles {
        text-align: center !important;
    }

    .hide-on-mobiles {
        display: none !important;
    }

    .only-on-mobiles {
        display: block !important;
    }

}

// Use .wide class for medium sized devices like laptops
@media screen and (min-width: 1180px) {

    .wide .row,
    .row .wide {
        margin: 0 auto;
        max-width: $wide-max-width;
    }

}

// Use .wider class for devices with even bigger resolutions like retina
@media screen and (min-width: 1366px) {

    .wider .row,
    .row .wider {
        margin: 0 auto;
        max-width: $wider-max-width;
    }

}

// Controlling visibility based on orientation of the device
.show-for-landscape,
.hide-for-portrait {
    display: block !important;
}

@media screen and (orientation: landscape) {

    .show-for-landscape,
    .hide-for-portrait {
        display: block !important;
    }

}

@media screen and (orientation: portrait) {

    .show-for-landscape,
    .hide-for-portrait {
        display: none !important;
    }

}

.hide-for-landscape,
.show-for-portrait {
    display: none !important;
}

@media screen and (orientation: landscape) {

    .hide-for-landscape,
    .show-for-portrait {
        display: none !important;
    }

}

@media screen and (orientation: portrait) {

    .hide-for-landscape,
    .show-for-portrait {
        display: block !important;
    }

}
